<template>
  <div>
    {{ fullName }}
    <hr />
    <input type="text" v-model="fullName" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "晓明",
    };
  },
  computed: {
    // 计算属性有完整的写法
    // 注意:1.完整的计算属性写法,可以使用v-model双向绑定
    //      2.简写的计算属性,不能使用v-model双向绑定
    // 经验:通常set函数接受到值,回去修改原来依赖的变量
    fullName: {
      get() {
        return "黄" + this.name;
      },
      // 注意:set函数,会在对fullName赋值是触发,也就是fullName=值,触发
      // 形参,代表  "="右边传来的值
      set(val) {
        this.name = val;
      },
    },
  },
};
</script>

<style>
</style>